<template>
  <div v-if="inEdit" class="property-point-input-div">
    <div class="xyz">
      <xyz-item
        v-model="x"
        label="X:"
        :min="min"
        :max="max"
        :precision="precision"
        @change="val => onChange('x', val)"
      />
      <xyz-item
        v-model="y"
        label="Y:"
        :min="min"
        :max="max"
        :precision="precision"
        @change="val => onChange('y', val)"
      />
      <xyz-item
        v-if="z"
        v-model="z"
        label="Z:"
        :min="min"
        :max="max"
        :precision="precision"
        @change="val => onChange('z', val)"
      />
    </div>
    <!-- <div class="point">
      <el-button icon="el-icon-location-outline" @click.native="onBtnClick" />
    </div>-->
  </div>
  <div v-else class="no-edit-text">{{ label }}</div>
</template>

<script>
import props from '../mixins/props'
// import interact from '@/mixins/interact'
import XyzItem from './xyz-item'

export default {
  name: 'PropertyXYZ',
  components: {
    XyzItem
  },
  mixins: [props],
  props: {
    precision: {
      type: Number,
      required: false,
      default: 2 // 默认小数点后2位
    },
    // 最小值
    min: {
      type: Number,
      required: false,
      default: -Infinity
    },
    // 最大值
    max: {
      type: Number,
      required: false,
      default: Infinity
    }
  },
  data() {
    return {
      // 当前值
      x: undefined,
      y: undefined,
      z: undefined
    }
  },
  computed: {
    label: function() {
      if (
        typeof this.x === 'number' &&
        typeof this.y === 'number' &&
        typeof this.z === 'number'
      ) {
        return (
          '(' +
          this.formatValue(this.x, this.precision) +
          ', ' +
          this.formatValue(this.y, this.precision) +
          ', ' +
          this.formatValue(this.z, this.precision) +
          ')'
        )
      } else {
        return '*多种*'
      }
    }
  },
  watch: {
    value(val) {
      const pt = this.parsePoint(val)
      this.x = pt.x
      this.y = pt.y
      this.z = pt.z
    }
  },
  created() {
    const pt = this.parsePoint(this.value)
    this.x = pt.x
    this.y = pt.y
    this.z = pt.z

    // 格式化(保证精度)
    // this.x = this.formatValue(this.x, this.precision)
    // this.y = this.formatValue(this.y, this.precision)
    // this.z = this.formatValue(this.z, this.precision)
  },
  methods: {
    parsePoint(value) {
      let pt = null
      try {
        pt = JSON.parse(this.value)
        if (pt) {
          pt.x = this.parseValue(pt.x)
          pt.y = this.parseValue(pt.y)
          pt.z = this.parseValue(pt.z)
        }
      } catch (err) {
        pt = null
      }
      if (!pt) {
        pt = { x: undefined, y: undefined, z: undefined }
      }
      return pt
    },
    isValidNumber(x) {
      return typeof x === 'number' && !isNaN(x)
    },
    parseValue(val) {
      const x = parseFloat(val)
      return this.isValidNumber(x) ? x : undefined
    },
    // 辅助函数: 格式化数据
    formatValue(data, dataPrecision) {
      // https://www.cnblogs.com/Jacklovely/p/6554278.html
      const base = Math.pow(10, dataPrecision)
      return Math.round(data * base) / base
    },
    // 参见: interact.js/onUpdateCmdResult()函数
    onUpdateCmdResult(result) {
      // console.log('更新点坐标:', result)
      // 更新坐标
      this.x = result.x
      this.y = result.y
      this.z = result.z
      // 向父组件发送change消息(参数需转换为json字符串!!!)
      this.$emit('change', JSON.stringify({ x: this.x, y: this.y, z: this.z }))
    },
    // 选择按钮click事件
    onBtnClick() {
      // console.log('点选坐标')
      // 参见: interact.js/getPoint()函数
      // this.getPoint({ x: this.x, y: this.y, z: this.z })
    },
    // xyz坐标修改事件
    onChange(type, val) {
      // 向父组件发送change消息(参数需转换为json字符串!!!)
      this.$emit('change', JSON.stringify({ x: this.x, y: this.y, z: this.z }))
      // 向父组件发送change消息(参数需转换为json字符串!!!)
      // this.$emit('change', JSON.stringify({ x: val }))
    }
  }
}
</script>

<style lang="scss">
.property-point-input-div {
  display: flex;
  flex-direction: row;
  .xyz {
    flex: 6;
    .el-input-number {
      width: 100% !important;
      .el-input__inner {
        text-align: left !important;
      }
    }
  }
  .point {
    flex: 1;
    display: flex;
    align-items: center;
    .el-button {
      flex: 1 !important;
      background-color: transparent !important;
      width: 100% !important;
      font-size: 14px !important;
    }
  }
}
</style>
